<template>
	<view class="content">
		<view class="top-content" v-for="(item,index) in javaData" :key="index" @click="tapPostD(item.id)">
			<view class="content-headImage">
				<view class="content-headImage-item">
					<view>
						<image :src="'http://localhost:8080' + item.avatar"></image>
					</view>
					<view>{{item.nickName}}</view>
					<view class="content-button">
						<view class="content-button-item" @click="handleFollowClick">
							<image src="../../../../static/images/icon/three-tap.png"></image>
						</view>
					</view>
				</view>
				<view class="content-headImage-text">
					<view class="text-wrap">{{item.title}}</view>
				</view>
				<!-- <view class="content-Image-item" v-show="item.imgUrl">
					<image v-for="(item1,index1) in item.imgUrl" :key="index1" :src="item1"></image>
				</view> -->
				<!-- 在此循环图片和视频 -->
				<view class="content-Image-item">
					<image v-show="item.imgUrl" v-for="(item1, index1) in item.imgUrl" :key="index1" :src="item1">
					</image>
					<video v-show="item.videoUrl" v-for="(item2, index2) in item.videoUrl" :key="index2"
						:src="item2"></video>
				</view>
			</view>
			<view class="content-Image-item-icon">
				<view class="child" @tap.stop="actionsClick()">
					<image src="/static/images/banner/share.png"></image>
					<view>分享</view>
				</view>
				<view class="child" @click="actionsComment()">
					<image src="/static/images/banner/comment.png"></image>
					<view>评论</view>
				</view>
				<!-- 				<view  class="child" @tap.stop="actionsCollect()">
					<image src="/static/images/banner/collect.png"></image>
				</view> -->
				<view class="child" @tap.stop="actionsLike(item.id,item.okCount)">
					<image :src="item.okCount == null? noLike:Liked"></image>
				</view>
				<!-- 		<view class="addtion-things">
					<view>	:</view>
				</view> -->
			</view>
		</view>

		<!-- 点击帖子右上角三个点 -->
		<view>
			<u-modal :show="show" :title="title" :showConfirmButton="true" :showCancelButton="true" @cancel="cancel"
				@confirm="confirm">
				<view>
					<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
				</view>
			</u-modal>
		</view>

		<!-- 举报成功提示 -->
		<up-notify ref="uNotifyRef" :message="message"></up-notify>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		watch,
		onMounted
	} from 'vue';
	import {
		listPost
	} from '@/api/tiezi/post'
	import {
		getUser
	} from '@/utils/auth'
	//取出当前登陆人的userid
	const userid = getUser()
	import {
		addReports
	} from '@/api/reports'
	import {
		addOk2,
		listOk
	} from '@/api/ok'
	const javaData = ref([])
	const props = defineProps({
		javaData: Array
	})
	watch(props, async (newQuestion, oldQuestion) => {
		// console.log(props.filteredData,'0000')
		javaData.value = props.javaData //循环此数组
	})
	//点击整个帖子触发,将帖子数据传给帖子详情页面
	const postId = ref()
	//点击整个帖子触发,将帖子数据传给帖子详情页面
	function tapPostD(id) {
		// console.log(item, '99992123')
		postId.value = id
		if (leState.value == false) {
			uni.navigateTo({
				url: '/pages/postDetail/index?data=' + id
			})
		}

	}
	// onMounted(() => {
	// 	listPost().then((res) => {
	// 		// console.log(res, 'Cpage页面描述及')
	// 		for (let i = 0; i < res.rows.length; i++) {
	// 			if (res.rows[i].imgUrl) {
	// 				res.rows[i].imgUrl = JSON.parse(res.rows[i].imgUrl)
	// 			}
	// 			if (res.rows[i].videoUrl) {
	// 				res.rows[i].videoUrl = JSON.parse(res.rows[i].videoUrl)
	// 			}
	// 		}
	// 		console.log(res.rows,'res.rows')
	// 		// CData.value = res.rows.filter(item => item.type == "Java")
	// 		console.log(res.rows.filter(item => item.type == "Java"),'javaData.value')
	// 	})
	// })
	//多选，选框
	const range = ref([{
			text: '涉嫌欺诈',
			value: 0
		}, {
			text: '色情低俗',
			value: 1
		}, {
			text: '政治敏感',
			value: 2
		}, {
			text: '虚假不实',
			value: 3
		},
		{
			text: '违反公德秩序',
			value: 4
		},
		{
			text: '搬运抄袭',
			value: 5
		}
	])
	const noLike = ref('/static/images/banner/ok.png') //未点赞
	const Liked = ref('/static/images/banner/ok2.png') //已点赞
	//设置层级初始值
	const leState = ref(false)
	const value = ref(0)
	//点击三个点显示遮罩层,初始化show
	const show = ref(false)
	const title = ref('举报')
	const message = ref('举报成功，等待管理员审核')
	const uNotifyRef = ref(null);
	//举报内容
	const reportContent = ref()
	const handleFollowClick = (() => {
		show.value = true
		leState.value = true
		//设置定时器
		setTimeout(() => {
			leState.value = false
		}, 200)
	})
	//点击数据框，获取举报内容
	const change = ((e) => {
		reportContent.value = e.detail.data.text
	})
	const cancel = (() => {
		show.value = false
	})
	const confirm = (() => {
		addReports({
			postId: postId.value,
			userId: userid,
			reason: reportContent.value
		}).then((res) => {
			// console.log(res, 'res')
			uNotifyRef.value.show({
				type: 'success',
				color: '#000',
				message: '举报成功，等待管理员审核',
				duration: 1000 * 3,
				color: '#fff',
				fontSize: 20,
				safeAreaInsetTop: true
			})
			show.value = false
		})
	})
	//点击分享
	function actionsClick() {
		uni.showToast({
			title: '分享',
			icon: 'none'
		})
	}
	//点击点赞
	function actionsLike(id,okCount) {
		// console.log(okCount,'okCount')
			addOk2({
				postId: id
			}).then((res) => {
				if(okCount==1){
					okCount = null
				}else{
					okCount = 1
				}
				// console.log(okCount,'okCount之后')
			})
		}
</script>

<style lang="scss" scoped>
	page {}

	.top-content {
		margin: 15rpx;
		background-color: #f5f5f5;
		border-radius: 15rpx;
		border: 2rpx solid #84AED0;
		// background-color: red;
		.content-headImage {
			padding: 20rpx;

			.content-headImage-item {
				display: flex;
				align-items: center;
				position: relative;

				image {
					margin-right: 10rpx;
					width: 50rpx;
					height: 50rpx;
				}

				.content-button {
					display: flex;
					align-items: center;
				}

				.content-button-item {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
				}

				.popup-delect {
					position: absolute;
					right: 0rpx;
					font-size: 30rpx;
				}
			}

			.content-headImage-item view:nth-child(2) {
				font-size: 30rpx;
			}

			.content-headImage-text view:nth-child(1) {
				margin-top: 10rpx;
				font-size: 30rpx;
			}

			.content-Image-item {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				/* 创建3列 */
				grid-gap: 10rpx;

				/* 格子之间的间距 */
				image {
					border-radius: 10rpx;
					width: 340rpx;
					height: 340rpx;
					object-fit: cover;
				}

				video {
					width: 340rpx;
					height: 340rpx;
					object-fit: cover;
				}
			}
		}

		.content-Image-item-icon {
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;

			.child {
				display: flex;

				view {
					margin-left: 20rpx;
				}
			}

			image {
				margin-bottom: 10rpx;
				width: 35rpx;
				height: 35rpx;
			}
		}
	}
</style>